<template>
  <a-card :title="t['素材分类']" class="category" :body-style="{ padding: 0 }">
    <a-menu v-if="libraryCategoryOptions?.length > 0" :selectable="false">
      <a-menu-item
        v-for="(item, key) in libraryCategoryOptions"
        :key="key"
        @click="onSelect(item.value)"
      >
        {{ item.label }}
      </a-menu-item>
    </a-menu>
    <a-empty v-else />
  </a-card>
</template>

<script setup lang="ts">
import { listLibrary } from "../data/curd";
import { libraryCategoryOptions } from "../data/options";
import { libraryQuery } from "../data/table";

const t = translate("公共模块");
const onSelect = (category: string) => {
  libraryQuery.value.word = category;
  listLibrary();
};
</script>

<style lang="scss" scoped>
.category {
  width: 300px;
}
</style>
